import moment from 'moment';
import { merge, mergeProperty, mergexAxisPoint } from './utils';

export const getConfig = (list, ctooltip, coord, menucode = 3, unit, keys, startValue) => {
  const option = getOptionConfig(list, ctooltip, coord, menucode, unit, keys, startValue);
  return option;
};

const getOptionConfig = (list, ctooltip, coord, menuCode, unit, keys, startValue) => {
  if (menuCode === 'JiaoYiCeLueYingXiang') {
    return getMenuCodeConfig(list, unit, menuCode, 4);
  }
  if (menuCode === 'DianLiangYuCeYingXiang') {
    return getMenuCodeConfig(list, unit, menuCode);
  }
  if (menuCode === 'DuanQiYuCeTiaoZhengXiaFa') {
    return getConfigAdjust(list, ctooltip, coord);
  }
  if (menuCode === 'JiaoYiCeLueYingXiangDrawer') {
    return getConfigDrawer(list, unit, menuCode, 4);
  }
  if (menuCode === 'DianJiaXinXiWeiHu') {
    return getBarConfig(list, ctooltip, menuCode);
  }
  if (menuCode === 'PiFaGouDianHeYueGuanLi') {
    return getBarPurchaseConfig(list, ctooltip, menuCode);
  }
  if (menuCode === 'FuZhuFuWuGongLvShenBao') {
    // return getDMenuCodeConfig(list, ctooltip);
  }
  if (menuCode === 'hhh') {
    return getTrade(list, keys, ctooltip, startValue);
  }
  return getDlConfigDrawer(list, unit, menuCode);
};
const KEYS_ENUM = [
  'category',
  'id',
  'parent_id',
  'capacityTotalPower',
  'dumpEnergy',
  'remainingPosition',
  'remainingPositionRatio',
  'totalPower',
  'contractPrice',
  'latitude',
  'index',
  'stationName',
  'option',
  'contractName',
  'counterpartyId',
  'undefined',
  'contractType',
  'calculate',
];
const seriesConfig = {
  day: {
    generation: {
      type: 'bar',
    },
    capacity: {
      type: 'line',
    },
    remaining: {
      type: 'bar',
      stack: true,
    },
    contruct: {
      type: 'bar',
      stack: true,
    },
    targetTrade: {
      type: 'line',
    },
  },
  month: {
    generation: {
      type: 'bar',
    },
    capacity: {
      type: 'line',
    },
    remaining: {
      type: 'bar',
      stack: true,
    },
    contruct: {
      type: 'bar',
      stack: true,
    },
    targetTrade: {
      type: 'line',
    },
  },
  stack: {
    generation: {
      type: 'line',
    },
    capacity: {
      type: 'line',
    },
    remaining: {
      type: 'line',
      stack: true,
    },
    contruct: {
      type: 'line',
      stack: true,
    },
    contract: {
      type: 'line',
      stack: true,
    },
    targetTrade: {
      type: 'line',
    },
  },
  hourstack: {
    generation: {
      type: 'line',
    },
    capacity: {
      type: 'line',
    },
    remaining: {
      type: 'line',
      stack: true,
    },
    contruct: {
      type: 'line',
      stack: true,
    },
    contract: {
      type: 'line',
      stack: true,
    },
    targetTrade: {
      type: 'line',
    },
  },
  continuity: {
    generation: {
      type: 'line',
    },
    capacity: {
      type: 'line',
    },
    remaining: {
      type: 'line',
      stack: true,
    },
    contruct: {
      type: 'line',
      stack: true,
    },
    contract: {
      type: 'line',
      stack: true,
    },
    targetTrade: {
      type: 'line',
    },
  },
  hourcontinuity: {
    generation: {
      type: 'line',
    },
    capacity: {
      type: 'line',
    },
    remaining: {
      type: 'line',
      stack: true,
    },
    contruct: {
      type: 'line',
      stack: true,
    },
    contract: {
      type: 'line',
      stack: true,
    },
    targetTrade: {
      type: 'line',
    },
  },
};
function initSeriesData1(dataList, keys) {
  let legendData = [],
    xAxisData = [],
    series = [];
  if (dataList.length) {
    series = dataList.map((item) => {
      let data = [];
      let itemKey = Object.keys(item)
        .filter((k) => {
          if (!KEYS_ENUM.includes(k)) return k;
        })
        .sort();
      itemKey.map((k) => {
        let title = '';
        if (item.latitude === 'day') {
          title = moment(Number(k)).format('MM月DD日');
        } else if (item.latitude === 'month') {
          title = `${Number(k) + 1}月`;
        } else if (item.latitude === 'continuity' || item.latitude === 'hourcontinuity') {
          const isDel = moment(Number(k)).format('HH:mm') === '00:00';
          if (isDel) {
            title = moment(Number(k).valueOf()).add(-1, 'days').format('MM月DD日') + '24:00';
          } else {
            title = moment(Number(k)).format('MM月DD日 HH:mm');
          }
        } else {
          title = moment(Number(k)).format('HH:mm');
          if (title === '00:00') {
            title = '24:00';
          }
        }

        data.push({
          name: title,
          value: item[k],
          itemStyle: {
            barWidth: 8,
          },
        });
      });
      let _icon = (item.category === '剩余仓位' ||
        item.category === '合约' ||
        item.category === '合约汇总') && { icon: 'roundRect' };
      legendData.push({
        name: item.category,
        ..._icon,
        itemStyle:
          item.category === '剩余仓位' || item.category === '合约' || item.category === '合约汇总'
            ? {}
            : {
                opacity: 1,
                borderWidth: 1,
                borderColor: keys[item.id]?.color,
                color: '#1F1F1F',
              },
      });
      let seriesObj = {};
      if (item.latitude === 'day' || item.latitude === 'month') {
        seriesObj = {
          barWidth: 8,
        };
      }
      return {
        data,
        symbol: 'circle',
        name: item?.category,
        latitude: item.latitude,
        ...seriesConfig[item.latitude][item.id],
        ...keys[item.id],
        ...seriesObj,
        symbolSize: 0,
        lineStyle: {
          width: 1,
        },
      };
    });
  }
  series.map((item) => {
    if (xAxisData.length > 0) return;
    if (item.data.length > 0) xAxisData = item.data.map((v) => v.name);
  });
  return {
    legendData,
    xAxisData,
    series,
  };
}

const getTrade = (list, keys, formatter = () => {}, startValue) => {
  const { legendData, xAxisData, series } = initSeriesData1(list, keys);
  let option = {
    title: {
      show: false,
    },
    dataZoom: [
      {
        type: 'inside',
        show: false,
        minSpan: 1,
        throttle: 500,
        startValue,
        // zoomLock: true,
        // moveOnMouseMove: false,
        // preventDefaultMouseMove: true,
        // zoomOnMouseWheel: false,
      },
      {
        type: 'slider',
        height: 14,
        bottom: 30,
        show: false,
        minSpan: 1,
        throttle: 500,
        right: 44,
        left: 40,
        dataBackground: {
          areaStyle: {
            color: '#757575',
          },
          borderColor: '#757575',
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
      extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)',
      backgroundColor: 'rgba(255, 255, 255, 1)',
      textStyle: { color: '#888E95', borderWidth: 1, borderColor: '#1A253C4B', padding: 12 },
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#F5F8FA',
          color: '#888E95',
          shadowBlur: 0,
        },
        shadowStyle: {
          color: '#ACB1C1',
          opacity: 0.07,
        },
      },
      formatter,
    },
    legend: {
      data: legendData,
      x: 'center',
      y: 'bottom',
      // itemWidth: 14,
      // itemHeight: 8,
      textStyle: {
        color: '#fff',
        padding: [0, 10, 0, 0],
      },
      inactiveColor: '#545454',
      inactiveBorderColor: '#545454',
      inactiveBorderWidth: 'inherit',
      selected: { 发电能力: false },
    },
    grid: {
      left: 0,
      top: 30,
      height: 220,
      width: '100%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      boundaryGap: true,
      axisTick: { alignWithLabel: true },
      nameTextStyle: { color: '#888E95' },
      axisLabel: { color: '#888E95' },
      axisLine: { lineStyle: { color: '#4f4f4f' } },
      axisPointer: {
        show: true,
        type: series[0]?.latitude === 'month' || series[0]?.latitude === 'day' ? 'shadow' : 'line',
        lineStyle: {
          color: '#ACB1C1',
          type: 'dashed',
        },
        label: {
          show: true,
          backgroundColor: '#444444',
          color: '#fff',
          shadowBlur: 0,
        },
      },
    },
    yAxis: {
      type: 'value',
      scale: true,
      splitNumber: 4,
      axisLine: { show: false },
      axisTick: { show: false },
      nameTextStyle: { color: '#888E95' },
      splitLine: { lineStyle: { color: '#363636' } },
      axisLabel: {
        color: '#888E95',
      },
      axisPointer: {
        show: true,
        type: series[0]?.latitude === 'month' || series[0]?.latitude === 'day' ? 'shadow' : 'line',
        lineStyle: {
          color: '#ACB1C1',
          type: 'dashed',
        },
        label: {
          backgroundColor: '#444444',
          color: '#fff',
          shadowBlur: 0,
          precision: 4,
          formatter: function (item) {
            return item.value && item.value.toFixed(3);
          },
        },
      },
    },
    series,
  };
  return option;
};

const configDefaultFormatter = (item) => {
  const str = item.data?.index
    ? `<span style="margin-right:4px;display:flex;justify-content:center;align-items: center;font-size:10px;color:#fff;width:12px;height:12px;border-radius:12px;background-color:#${item.data?.colorRich}">${item.data?.index}</span>`
    : '';
  return `<div style="display:flex;justify-content: space-between;align-items: center;margin-bottom:4px"> <div style="display:flex;align-items: center;">
  <span style="display:inline-block;margin-right:8px;border-radius:8px;width:8px;height:8px;background-color:${item.color}" ></span>
  ${str}
 <span style="color:#888E95;"> ${item.seriesName}</span></div><span style="margin-left:20px;color:#373E48;font-weight:500">${item.value}</span></div>`;
};
const configFormatter = (item) => {
  const indexStr =
    item.fu !== '-'
      ? `<span style="margin-right:8px;display:flex;justify-content:center;align-items: center;font-size:10px;color:#fff;width:12px;height:12px;border-radius:12px;background-color:#${item.fuColorRich}">${item.fuIndex}</span>`
      : '';
  const indexplusStr =
    item.value !== '-'
      ? `<span style="margin-right:8px;display:flex;justify-content:center;align-items: center;font-size:10px;color:#fff;width:12px;height:12px;border-radius:12px;background-color:#${item.data?.colorRich}">${item.data?.index}</span>`
      : '';
  return `<div><div style="display:flex;align-items: center;">
            <span style="display:inline-block;margin-right:8px;border-radius:8px;width:8px;height:8px;background-color:${item.color}" ></span>
           <span style="color:#888E95;">${item.seriesName}</span>
           </div><div style="color:#888E95;display:flex;justify-content: space-between;margin:4px 0"><span style="padding-left:15px;display:flex;align-items: center;">${indexplusStr}<span>正:</span><span style="color:#373E48;width:40px;text-align:center;display:inline-block;padding-left:4px;margin-right:10px;font-weight:500">${item.value}</span></span>
           <span style="padding-left:40px;display:flex;align-items: center;padding-right:10px">${indexStr}<span>负:</span><span style="color:#373E48;width:40px;display:inline-block;text-align:center;padding-left:4px;font-weight:500">${item.fu}</span></span></div></div>`;
};

export const getConfigAdjust = (
  list, // 数据
  ctooltip,
  coord,
) => {
  //   renovate.isRenovate = false;
  let xAxisData = [];
  const series = []; // 图表显示数据的集合
  const legendData = []; // 底部可点击名字列表
  const tooltip = {
    trigger: 'axis',
    extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    textStyle: { color: '#888E95', borderWidth: 1, borderColor: '#1A253C4B', padding: 12 },
  };
  tooltip.axisPointer = {
    type: 'cross',
    label: {
      show: false,
      backgroundColor: '#F5F8FA',
      color: '#888E95',
      shadowBlur: 0,
    },
    shadowStyle: {
      color: '#ACB1C1',
      opacity: 0.07,
    },
  };
  tooltip.formatter = ctooltip || [];
  let serieObj = {};
  serieObj = {
    name: '',
    type: 'line',
    color: list.color,
    lineStyle: { color: list.color, width: 1 },
  };
  const data = [];
  const tempXData = [];
  list.pointList &&
    list.pointList.map((cell) => {
      tempXData.push(cell.xAxis);
      data.push({
        name: cell.xAxis,
        tvalue: cell.value,
        value: Math.round(cell.value * 100),
        tooltip: { backgroundColor: list.color },
      });
    });

  serieObj = {
    symbolSize: 0,
    ...serieObj,
    data,
  };
  if (xAxisData.length === 0) xAxisData = [...xAxisData, ...tempXData];
  series.push(serieObj);

  const legend =
    legendData.length === 0 ? { show: false } : { data: legendData, x: 'center', y: 'bottom' };
  const option = {
    grid: { containLabel: true, left: 0, width: '99%' },
    tooltip,
    dataZoom: [
      { type: 'inside', show: true, minSpan: 1, throttle: 500 },
      { type: 'slider', height: 20, top: '94%', show: true, minSpan: 1, throttle: 500 },
    ],
    legend,
    xAxis: {
      type: 'category',
      data: xAxisData,
      boundaryGap: [],
      axisTick: { alignWithLabel: true },
      nameTextStyle: { color: '#888E95' },
      axisLabel: { color: '#888E95' },
      axisLine: { lineStyle: { color: '#D1D9E9' } },
      axisPointer: {
        label: {
          backgroundColor: '#F5F8FA',
          color: '#888E95',
          shadowBlur: 0,
        },
      },
    },
    yAxis: {
      type: 'value',
      scale: true,
      splitNumber: 4,
      axisLine: { show: false },
      axisTick: { show: false },
      nameTextStyle: { color: '#888E95' },
      axisLabel: { color: '#888E95', formatter: '{value}%' },
      splitLine: { lineStyle: { color: 'rgba(216, 220, 230, 0.4)' } },
    },
    toolbox: coord
      ? {
          itemSize: 16,
          iconStyle: {
            color: '#666',
            borderWidth: 0,
            opacity: 1,
          },
          emphasis: {
            iconStyle: {
              color: '#1E7CE8',
            },
          },
          feature: {
            iconStyle: {},
            brush: {
              type: ['lineX', 'clear'],
              icon: {
                lineX: '',
                clear:
                  'path://M15.33,14.83H7.65L15.48,7a.83.83,0,0,0,0-1.18l-3.3-3.3a.83.83,0,0,0-1.18,0L2.52,11a.83.83,0,0,0,0,1.18l3.3,3.3s0,0,0,0a.49.49,0,0,0,.46.31h9a.5.5,0,0,0,.5-.5A.5.5,0,0,0,15.33,14.83ZM11.59,3.34l3.07,3.07L9.84,11.22l-3-3.07ZM3.34,11.59,6.08,8.85l3.05,3.08L6.41,14.66Z',
              },
              title: {
                lineX: '选择',
                clear: '清除',
              },
            },
          },
        }
      : {},
    brush: {
      xAxisIndex: 'all',
      brushLink: 'all',
      outOfBrush: {
        colorAlpha: 0.1,
      },
      transformable: true,
      brushMode: 'multiple',
      brushStyle: {
        borderWidth: 1,
        color: 'rgba(30,124,232,0.05)',
        borderColor: 'none',
      },
      throttleType: 'debounce', // 开启选中延迟后调用回调延迟
      throttleDelay: 600, // 选中延迟后调用回调延迟时间
    },
    series,
  };
  return option;
};
const getDlConfigDrawer = (_list, unit) => {
  const keys = Array.from(new Set(_list.map((item) => item.key)));

  const list = merge(_list, 'name');
  const { legendData, xAxisData, series } = initDrawerSeriesData(list, keys);
  const option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: { color: '#ACB1C1' },
      },
      padding: 10,
      backgroundColor: '#fff',
      textStyle: {
        color: '#333',
        fontSize: 12,
      },
      extraCssText: 'box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;',
      formatter(params) {
        const flag = series.some((item) => item.stack);
        const _params = mergeProperty(params, 'seriesName');
        let str = `<div style="margin-right:4px;display:flex;justify-content: space-between;align-items: center;margin-bottom:10px"><span style="font-weight:500">${params[0].axisValue}</span><span style="margin-left:40px">单位:${unit}</span></div>`;
        if (flag) {
          _params.forEach((item) => {
            str += configFormatter(item);
          });
        } else {
          params.forEach((item) => {
            str += configDefaultFormatter(item);
          });
        }

        return str;
      },
    },
    legend: {
      data: legendData,
      itemWidth: 14,
      itemHeight: 8,
      x: 'center',
      y: 'bottom',
    },

    grid: {
      left: 0,
      top: 10,
      right: 10,
      height: '88%',
      containLabel: true,
    },
    axisPointer: {
      label: {
        show: false,
        backgroundColor: '#F5F8FA',
        color: '#888E95',
        shadowBlur: 0,
      },
      shadowStyle: {
        color: '#ACB1C1',
        opacity: 0.07,
      },
    },

    dataZoom: [
      { type: 'inside', show: true, minSpan: 1, throttle: 500 },
      { type: 'slider', height: 20, top: '92%', show: true, minSpan: 1, throttle: 500 },
    ],
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        boundaryGap: [],
        axisTick: { alignWithLabel: true },
        nameTextStyle: { color: '#888E95' },
        axisLabel: { color: '#888E95' },
        axisLine: { lineStyle: { color: '#D1D9E9' } },
        axisPointer: {
          label: {
            backgroundColor: '#F5F8FA',
            color: '#888E95',
            shadowBlur: 0,
          },
        },
      },
    ],
    yAxis: {
      scale: true,
      axisLine: { show: false },
      axisTick: { show: false },
      nameTextStyle: { color: '#888E95' },
      axisLabel: { color: '#888E95' },
      splitLine: { lineStyle: { color: 'rgba(216, 220, 230, 0.4)' } },
    },

    series,
  };
  return option;
};
const getConfigDrawer = (_list, unit, menuCode, precision = 3) => {
  const list = merge(_list);

  const { legendData, xAxisData, series } = initDrawerSeriesData(list, menuCode, precision);
  const option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: { color: '#ACB1C1' },
      },
      padding: 10,
      backgroundColor: '#fff',
      textStyle: {
        color: '#333',
        fontSize: 12,
      },
      extraCssText: 'box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;',
      formatter(params) {
        const _params = params.sort((a, b) => a.seriesIndex - b.seriesIndex);
        let str = `<div style="display:flex;justify-content: space-between;align-items: center;margin-bottom:10px"><span style="font-weight:500">${params[0].axisValue}</span><span style="margin-left:40px">单位:${unit}</span></div>`;
        _params.forEach((item) => {
          str += configDefaultFormatter(item);
        });
        return str;
      },
    },
    legend: {
      type: 'scroll',
      data: legendData,
      bottom: 10,
      left: 'center',
      itemWidth: 14,
      itemHeight: 8,
    },

    grid: [
      {
        left: 0,
        top: 10,
        right: 10,
        height: '60%',
        containLabel: true,
      },
      {
        left: 0,
        right: 10,
        top: '70%',
        height: '16%',
        containLabel: true,
      },
    ],
    axisPointer: {
      link: { xAxisIndex: 'all' },
      label: {
        show: false,
        backgroundColor: '#F5F8FA',
        color: '#888E95',
        shadowBlur: 0,
        precision,
      },
      shadowStyle: {
        color: '#ACB1C1',
        opacity: 0.07,
      },
    },

    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0, 1],
        throttle: 500,
      },
      {
        show: true,
        xAxisIndex: [0, 1],
        type: 'slider',
        top: '90%',
        minSpan: 1,
        height: 20,
        throttle: 500,
      },
    ],
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        boundaryGap: [],
        axisTick: { alignWithLabel: true },
        nameTextStyle: { color: '#888E95' },
        axisLabel: { color: '#888E95' },
        axisLine: { lineStyle: { color: '#D1D9E9' } },
        axisPointer: {
          label: {
            backgroundColor: '#F5F8FA',
            color: '#888E95',
            shadowBlur: 0,
          },
        },
      },
      {
        type: 'category',
        gridIndex: 1,
        data: xAxisData,
        axisTick: { show: false },
        nameTextStyle: { color: '#888E95' },
        axisLabel: { color: '#888E95' },
        axisLine: { lineStyle: { color: '#D1D9E9' } },
        axisPointer: {
          label: {
            backgroundColor: '#F5F8FA',
            color: '#888E95',
            shadowBlur: 0,
          },
        },
      },
    ],
    yAxis: [
      {
        scale: true,
        axisLine: { show: false },
        axisTick: { show: false },
        nameTextStyle: { color: '#888E95' },
        axisLabel: { color: '#888E95' },
        splitLine: { lineStyle: { color: 'rgba(216, 220, 230, 0.4)' } },
      },
      {
        gridIndex: 1,
        scale: true,
        splitNumber: 2,
        axisLine: { show: false },
        axisTick: { show: false },
        nameTextStyle: { color: '#888E95' },
        axisLabel: { color: '#888E95' },
        splitLine: { lineStyle: { color: 'rgba(216, 220, 230, 0.4)' } },
      },
    ],
    series,
  };
  return option;
};
const getMenuCodeConfig = (list, unit, menuCode, precision = 3) => {
  const { legendData, yAxisData, series, minusSeriesFlag } = initSeriesData(
    list,
    menuCode,
    precision,
  );
  const option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: { color: '#ACB1C1' },
      },
      padding: 10,
      backgroundColor: '#fff',
      textStyle: {
        color: '#333',
        fontSize: 12,
      },
      extraCssText: 'box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;',
      formatter(params) {
        const _flag = menuCode !== 'JiaoYiCeLueYingXiang' && series.some((item) => item.stack);
        const _params = mergeProperty(params, 'seriesName');
        let str = `<div style="display:flex;justify-content: space-between;align-items: center;margin-bottom:10px;"><span style="font-weight:500">${params[0].axisValue}</span><span style="margin-left:40px">单位:${unit}</span></div>`;
        if (_flag) {
          _params.forEach((item) => {
            if (item.data?.flag) {
              str += configFormatter(item);
            }
          });
        } else {
          params.forEach((item) => {
            if (menuCode === 'JiaoYiCeLueYingXiang') {
              str += configDefaultFormatter(item);
            }
            if (item.data?.flag) {
              str += configDefaultFormatter(item);
            }
          });
        }

        return str;
      },
    },
    legend: {
      type: 'scroll',
      data: legendData,
      x: 'center',
      y: 'bottom',
      itemWidth: 14,
      itemHeight: 8,
    },
    grid: {
      left: 0,
      top: 0,
      containLabel: true,
    },
    xAxis: [
      {
        type: 'value',
        axisTick: { show: false },
        nameTextStyle: { color: '#888E95' },
        axisLabel: {
          color: '#888E95',
          margin: 10,
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: { show: false },
        splitLine: {
          lineStyle: {
            color: ['#D1D9E9'],
            width: 1,
            opacity: 0.4,
          },
        },
        splitNumber: minusSeriesFlag ? 2 : 4,
        axisPointer: {
          label: {
            backgroundColor: '#F5F8FA',
            color: '#888E95',
            shadowBlur: 0,
          },
        },
        boundaryGap: minusSeriesFlag ? ['60%', '10%'] : [0, 0],
      },
    ],
    yAxis: {
      type: 'category',
      data: yAxisData,
      axisTick: { show: false, alignWithLabel: true }, // axisTick
      axisLine: { show: false, lineStyle: { color: '#D1D9E9' } },
      axisLabel: {
        color: '#888E95',
      },
      axisPointer: {
        type: 'shadow',
        label: { show: false },
        shadowStyle: { color: 'rgba(9, 9, 10, 0.02)' },
      },
    },
    series,
  };
  return option;
};
const initDrawerSeriesData = (list, menuCode, precision = 3) => {
  const pointSortArr = mergexAxisPoint(list);

  const legendData = Array.from(
    new Set(
      list.map((item) =>
        item.stack && menuCode !== 'JiaoYiCeLueYingXiangDrawer' ? item._name : item.name,
      ),
    ),
  );
  const xAxisData = [];
  const yAxisData = [];
  const series = [];
  list.map((item, index) => {
    const stack = item?.stack ? { stack: item.stack } : {};
    const data = [];
    let seriesObj = {
      ...stack,
      name: item.stack && menuCode !== 'JiaoYiCeLueYingXiangDrawer' ? item._name : item.name,
      _name: item.name,
      symbol: 'emptyCircle',
      symbolSize: 2,
      type: item.type,
      color: item.color,
    };

    let emphasisPoint = {};
    let emphasisPointColor = {};
    let emphasisBgPointColor = {};
    const dataSourceId = item.dataSourceId || 'dataSourceId';

    item.list &&
      item.list.map((cell) => {
        index === 0 && xAxisData.push(cell._xAxis);
        // drawer排名
        let sortPointIndex = 0;
        if (cell.value) sortPointIndex = cell.value > 0 ? 0 : 1;
        const sortIndex =
          (pointSortArr.length > 0 &&
            pointSortArr[sortPointIndex].filter((m) => m._xAxis === cell._xAxis)[0][
              dataSourceId
            ]) ||
          '';
        const itemStyle =
          menuCode === 'JiaoYiCeLueYingXiangDrawer'
            ? {
                itemStyle: {
                  color: cell.valueColor && cell.valueColor,
                },
              }
            : {};
        data.push({
          name: cell._xAxis,
          index: sortIndex,
          color: cell.valueColor,
          valueIndex: cell.valueIndex,
          colorRich: cell.valueColor && cell.valueColor.split('#')[1],
          value: cell.value || cell.value === 0 ? Number(cell.value).toFixed(precision) : '-',
          sortPointIndex,
          ...itemStyle,
        });

        emphasisBgPointColor = {
          // backgroundColor: cell.valueColor,
        };
        emphasisPointColor = {
          ...emphasisPointColor,
          [cell.valueColor && `${cell.valueColor.split('#')[1]}`]: {
            backgroundColor: cell.valueColor,
            width: 16,
            height: 16,
            borderRadius: 8,
            verticalAlign: 'middle',
          },
        };
        emphasisPoint =
          menuCode === 'JiaoYiCeLueYingXiangDrawer'
            ? {
                emphasis: {
                  label: {
                    backgroundColor: 'none',
                  },
                },
              }
            : {
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 12,
                    width: 14,
                    height: 14,
                    color: '#fff',
                    align: 'center',
                    verticalAlign: 'middle',
                    position: ['50%', '50%'],
                    fontWeight: 'bold',
                    formatter(params) {
                      return [`{${params.data.colorRich}|${params.data.index}}`].join('\n');
                    },
                    borderWidth: 0,
                    borderRadius: 7,
                    lineHeight: 14,
                    ...emphasisBgPointColor,
                    rich: emphasisPointColor,
                  },
                },
              };
      });

    const xy =
      item.type === 'line'
        ? {
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            connectNulls: true,
            ...emphasisPoint,
          }
        : { xAxisIndex: 1, yAxisIndex: 1 }; // barWidth: 2.4
    seriesObj = {
      ...seriesObj,
      data,
      ...xy,
    };
    series.push(seriesObj);
  });

  return { legendData, yAxisData, xAxisData, series };
};
const initSeriesData = (list, menuCode, precision = 3) => {
  const legendData = Array.from(
    new Set(
      list.map((item) => {
        return item.stack
          ? menuCode === 'JiaoYiCeLueYingXiang'
            ? item.name
            : item._name
          : item.name;
      }),
    ),
  );
  const xAxisData = [];
  const yAxisData = [];
  const series = [];
  const pointSortArr = menuCode === 'JiaoYiCeLueYingXiang' ? [] : mergexAxisPoint(list, 'data');
  list.map((item, index) => {
    const stack = item?.stack ? { stack: item.stack } : {};
    const dataBodyList = [...item.data].reverse();
    let emphasisPoint = {};
    let emphasisPointColor = {};
    let offsetPosition = {};
    const markLine = item?.stack
      ? {
          markLine: {
            symbolSize: 0,
            data: [
              {
                xAxis: 0,
              },
            ],
            lineStyle: {
              width: 1,
              type: 'solid',
              color: '#ACB1C1',
              opacity: 0.4,
            },
          },
        }
      : {};
    const data = [];
    let seriesObj = {
      name: item?._name || item.name,
      _name: item.name,
      // symbolSize: 0,
      symbol: 'emptyCircle',
      symbolSize: 2,
      type: item.type,
      color: item.color,
      ...markLine,
      ...stack,
    };

    offsetPosition = {
      position: item.name.includes('负') ? 'left' : 'right',
      offset: item.name.includes('负') ? [-10, 0] : [10, 0],
    };

    const dataSourceId = item.dataSourceId || 'dataSourceId';

    dataBodyList &&
      dataBodyList
        // .sort((a, b) => a.stationId - b.stationId)
        .map((cell) => {
          if (index === 0) {
            yAxisData.push(cell.stationName);
          }
          // 排名
          let sortPointIndex = 0;
          if (cell.bigDecimalValue) sortPointIndex = cell.bigDecimalValue > 0 ? 0 : 1;
          const sortIndex =
            (pointSortArr.length > 0 &&
              pointSortArr[sortPointIndex].filter((m) => m.stationId === cell.stationId)[0][
                dataSourceId
              ]) ||
            '';

          const _label = sortIndex === 1 && {
            show: true,
            position: 'right',
            fontSize: 8,
            color: '#fff',
            verticalAlign: 'middle',
            ...offsetPosition,
            fontWeight: 'bold',
            borderWidth: 0,
            lineHeight: 12,
            formatter: [`{a|${sortIndex}}  {b|${item.name}}`].join('\n'),
            rich: {
              a: {
                backgroundColor: cell.color,
                width: 12,
                height: 12,
                borderRadius: 6,
                lineHeight: 8,
                verticalAlign: 'middle',
                color: '#fff',
                align: 'center',
                fontSize: 8,
                fontWeight: 'bold',
              },
              b: {
                fontSize: 12,
                color: '#888E95',
              },
            },
          };

          data.push({
            name: cell.stationName,
            index: sortIndex,
            flag: cell?.flag,
            color: cell?.color,
            colorRich: cell.color && cell?.color.split('#')[1],
            evaluationIndex: cell.evaluationIndex,
            value:
              cell.bigDecimalValue || cell.bigDecimalValue === 0
                ? Number(cell.bigDecimalValue).toFixed(precision)
                : '-',
            label: _label,
          });
          emphasisPointColor = {
            ...emphasisPointColor,
            [cell.color && `${cell.color.split('#')[1]}`]: {
              backgroundColor: cell.color,
              width: 12,
              height: 12,
              borderRadius: 6,
              lineHeight: 12,
              verticalAlign: 'middle',
              align: 'center',
            },
            b: {
              fontSize: 12,
              color: '#888E95',
            },
          };

          emphasisPoint =
            menuCode === 'JiaoYiCeLueYingXiang'
              ? {}
              : {
                  emphasis: {
                    label: {
                      show: true,
                      position: 'right',
                      fontSize: 8,
                      color: '#fff',
                      verticalAlign: 'middle',
                      ...offsetPosition,
                      fontWeight: 'bold',
                      borderWidth: 0,
                      lineHeight: 12,
                      formatter(params) {
                        return params.data.flag && params.data.index && params.data.index !== 1
                          ? [`{${params.data.colorRich}|${params.data.index}}`].join('\n')
                          : [
                              `{${params.data.colorRich}|${params.data.index}}  {b|${item.name}}`,
                            ].join('\n');
                      },

                      rich: emphasisPointColor,
                    },
                  },
                };
        });
    const barConfig =
      item.type === 'bar'
        ? {
            barWidth: 6,
            barGap: '160%',
          }
        : { xAxisIndex: 0, lineStyle: { width: 1 }, connectNulls: true };
    seriesObj = {
      ...seriesObj,
      data,
      ...barConfig,
      barGap: '100%' /* 多个并排柱子设置柱子之间的间距 */,
      barCategoryGap: '50%' /* 多个并排柱子设置柱子之间的间距 */,
      ...emphasisPoint,
    };
    series.push(seriesObj);
  });
  const minusSeriesFlag = series.map((item) => item.data.some((v) => v.value < 0)).includes(true);

  return { legendData, yAxisData, xAxisData, series, minusSeriesFlag };
};

const barConfigData = (list) => {
  const series = [];
  const xAxisData = [];
  list.map((item, index) => {
    index === 0 && xAxisData.push(...item.list.map((m) => m.voltageLevel));
    series.push({
      ...item,
      name: item?.name || 'name',
      itemStyle: {
        normal: { barBorderRadius: [20, 20, 0, 0] },
      },
      data: item.list.map((point) => {
        if (point.electricityPrice) {
          return point.electricityPrice > 0
            ? {
                value: point.electricityPrice,
                itemStyle: {
                  barBorderRadius: [20, 20, 0, 0],
                },
              }
            : {
                value: point.electricityPrice,
                itemStyle: {
                  barBorderRadius: [0, 0, 20, 20],
                },
              };
        }
        return 0;
      }),
      barWidth: 8,
      barGap: '80%',
    });
  });
  return { series, xAxisData };
};
const getBarConfig = (list, ctooltip) => {
  const { series, xAxisData } = barConfigData(list, ctooltip);

  const tooltip = {
    trigger: 'axis',
    extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    textStyle: { color: '#888E95', borderWidth: 1, borderColor: '#1A253C4B', padding: 12 },
  };
  tooltip.axisPointer = {
    type: 'shadow',
    crossStyle: {
      shadowColor: '#F9FAFC',
    },
  };
  tooltip.formatter = ctooltip || [];
  const option = {
    title: {
      show: false,
    },
    tooltip,
    legend: {
      show: false,
    },
    grid: {
      left: 0,
      top: 30,
      right: 20,
      bottom: 0,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      boundaryGap: true,
      axisPointer: {
        type: 'shadow',
        label: { show: false },
        shadowStyle: { color: 'rgb(234, 238, 244,0.3)' },
      },
      axisTick: { show: false },
      nameTextStyle: { color: '#888E95' },
      axisLabel: { color: '#888E95' },
      axisLine: { lineStyle: { color: '#D1D9E9' } },
    },
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#888E95',
          },
        },
        splitNumber: 2,
        splitLine: {
          show: true,
          lineStyle: {
            height: '1px',
            color: '#EDF0F6',
          },
        },
        axisTick: {
          show: false,
        },
        scale: true,
        name: '',
        axisLabel: {
          formatter(value) {
            return value;
          },
        },
        axisPointer: {
          show: true,
          type: 'line',
          lineStyle: {
            color: '#ACB1C1',
            type: 'dashed',
          },
          label: {
            backgroundColor: '#F5F8FA',
            shadowBlur: 0,
            color: '#888E95',
            formatter(item) {
              return item.value && item.value.toFixed(3);
            },
          },
        },
      },
    ],
    series,
  };
  return option;
};

const barConfigPurchaseData = (list) => {
  const series = [];
  const xAxisData = [];
  list.map((item, index) => {
    index === 0 && xAxisData.push(...item.dataList.map((m) => m.xAxis));

    series.push({
      ...item,
      itemStyle: {
        // normal: { barBorderRadius: [20, 20, 0, 0] },
      },
      data: item.dataList.map((m) => ({ value: m.value })),
      barWidth: 8,
      symbolSize: item.type === 'line' && 0,
      lineStyle: {
        width: item.type === 'line' && 1,
      },
      yAxisIndex: item.type === 'line' ? 1 : 0,
    });
  });
  return { series, xAxisData };
};
const getBarPurchaseConfig = (list, ctooltip) => {
  const { series, xAxisData } = barConfigPurchaseData(list, ctooltip);

  const tooltip = {
    trigger: 'axis',
    extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    textStyle: { color: '#888E95', borderWidth: 1, borderColor: '#1A253C4B', padding: 12 },
  };
  tooltip.axisPointer = {
    type: 'shadow',
    crossStyle: {
      shadowColor: '#F9FAFC',
    },
  };
  tooltip.formatter = ctooltip || [];

  const option = {
    title: {
      show: false,
    },
    tooltip,
    legend: {
      show: false,
    },
    grid: {
      left: 1,
      top: 30,
      right: 30,
      bottom: 0,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      boundaryGap: true,
      axisPointer: {
        type: 'shadow',
        label: { show: false },
        shadowStyle: { color: 'rgb(234, 238, 244,0.3)' },
      },
      axisTick: { show: true },
      nameTextStyle: { color: '#888E95' },
      axisLabel: { color: '#888E95' },
      axisLine: { lineStyle: { color: '#D1D9E9' } },
    },
    yAxis: [
      {
        type: 'value',
        name: 'MWh',
        nameTextStyle: {
          align: 'right',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#888E95',
          },
        },
        splitNumber: 2,
        splitLine: {
          show: true,
          lineStyle: {
            height: '1px',
            color: '#EDF0F6',
          },
        },
        axisTick: {
          show: false,
        },
        scale: true,
        min: 0,
        axisLabel: {
          formatter(value) {
            return value;
          },
        },
        axisPointer: {
          show: true,
          type: 'line',
          lineStyle: {
            color: '#ACB1C1',
            type: 'dashed',
          },
          label: {
            backgroundColor: '#F5F8FA',
            shadowBlur: 0,
            color: '#888E95',
            formatter(item) {
              return item.value && item.value.toFixed(3);
            },
          },
        },
      },
      {
        type: 'value',
        name: '元/MWh',
        nameTextStyle: {
          align: 'left',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#888E95',
          },
        },
        splitNumber: 2,
        splitLine: {
          show: true,
          lineStyle: {
            height: '1px',
            color: '#EDF0F6',
          },
        },
        axisTick: {
          show: false,
        },
        scale: true,
        min: 0,
        axisLabel: {
          formatter(value) {
            return value;
          },
        },
        axisPointer: {
          label: {
            formatter(item) {
              return item.value && item.value.toFixed(2);
            },
          },
        },
      },
    ],
    series,
  };
  return option;
};
